<template>
	<view class="content">
		<!-- F1：顶部用户自选的主题图 -->
		<!-- F2：邻里互动消息列表 -->
		<uni-list>
			<uni-list-item v-for="(m,i) in msgList" :key="i">
				<!-- 定制左侧插槽中的内容 -->
				<template v-slot:header>
					<view class="msg-header">
						<image :src="base+m.avatar" mode="widthFix"/>
					</view>
				</template>
				<!-- 定制中央主体插槽中的内容 -->
				<template v-slot:body>
					<view class="msg-body">
						<!-- 消息主体中的第1层：用户名+所在地 -->
						<view class="layer1">
							<text>{{m.uname}}</text>
							<text class="location">{{m.location}}</text>
						</view>
						<!-- 消息主体中的第2层：消息内容 -->
						<view class="layer2">
							<text>{{m.content}}</text>
						</view>
						<!-- 消息主体中的第3层：消息相关图片 -->
						<view class="layer3">
							<uni-grid :column="3" :showBorder="false">
								<uni-grid-item class="pic" v-for="(p,i) in m.picList" :key="i">
									<!-- aspectFit：保持宽高比，保证长边完全显示，短边可能留白 -->
									<image mode="aspectFit" :src="base+p.url"/>
								</uni-grid-item>									
							</uni-grid>
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<!-- F3：加载更多 -->
		<!-- <uni-load-more status="more"></uni-load-more> -->
		<!-- <uni-load-more status="loading"></uni-load-more> -->
		<!-- <uni-load-more status="noMore"></uni-load-more> -->
		<uni-load-more :status="isLoading ? 'loading' : (pageNum<pageCount ? 'more' : 'noMore')"/>
	</view>
</template>

<script>
	import { chatQuery, base } from '@/service'
	export default {
		data() {
			return {
				base,		//把导入的局部变量上升为当前页面的模型数据
				/****列表页必需的五个变量：注意这五个变量的初始值****/
				kw: "",			//要显示的记录包含的关键字 —— 当前页面暂时不需要
				msgList:[],		//查询到的互动消息列表
				pageCount:9999,	//符合条件的记录可以分为多少页，即总页数
				pageNum:0,		//当前加载到哪一页数据了，即当前页号
				isLoading:false,//当前正在加载数据吗？
			}
		},
		//生命周期方法1：页面加载时 —— 加载下一页数据
		onLoad(){
			console.log('加载下一页方法调用情形1：页面加载时')
			this.loadNextPageData()
		},
		//生命周期方法2：页面滚动到底部时 —— 加载下一页数据
		onReachBottom(){
			//注意：此方法的触发受pages.json > pages> onReachBottomDistance
			console.log('加载下一页方法调用情形2：滚动到页面底部');
			this.loadNextPageData()
		},
		//生命周期方法3：页面在顶部下拉刷新时 —— 加载下一页数据
		onPullDownRefresh(){
			//注意：此方法的触发受pages.json > pages> enablePullDownRefresh
			console.log('加载下一页方法调用情形3：顶部下拉刷新');
			//先清除已经加载数据痕迹
			this.msgList = [ ]  //清空已加载数据
			this.pageNum = 0	//已加载的页号重置为0
			this.pageCount = 9999
			//再从第1页开始加载全新的数据
			this.loadNextPageData()
			//最后停止“加载中”动画效果
			uni.stopPullDownRefresh()
		},
		methods: {
			/*****列表页必需的一个方法*****/
			async loadNextPageData(){
				//1.如果当前已经正在加载中，或者已经没有更多数据了，则退出
				if(this.isLoading || this.pageNum>=this.pageCount){
					return
				}
				//2.设置当前正在加载中为true
				this.isLoading = true
				//3.异步请求服务器端下一页数据，得到之后拼接在现有数据之后
				let {pageCount,pageNum, data} = await chatQuery( this.pageNum + 1 )
				this.pageCount = pageCount
				this.pageNum = pageNum
				//this.msgList = data  错误！新数据不能覆盖现有数据
				this.msgList = [ ...this.msgList,  ...data ]  //拼接在尾部
				//4.设置当前正在加载中为false	
				this.isLoading = false
			}
		}
	}
</script>

<style lang="scss" scoped>
.msg-header {
	margin-right: $uni-spacing-row-base;
	image {width: 70rpx;}
}
.msg-body {
	flex-direction: column; //弹性容器主轴方向为纵向
	margin-bottom: $uni-spacing-col-lg;
	.layer1 { 
		justify-content: space-between;  //弹性容器中的子元素在主轴上对齐方式 
		margin-bottom: $uni-spacing-col-base;
		.location {font-size: $uni-font-size-sm; color:$uni-text-color-grey;}
	}
	.layer2 {
		margin-bottom: $uni-spacing-col-base;
	}
	.layer3 {
		.pic { 
			padding: $uni-spacing-col-sm $uni-spacing-row-sm; 
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
